<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import Map from 'ol/Map';
    import View from 'ol/View';
    import WKB from 'ol/format/WKB';
    import {OSM, Vector as VectorSource} from 'ol/source';
    import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
    export default {
        name: "WkbLayer",
        data() {
            return {
            }
        },
        mounted() {
            //初始化osm的瓦片地图
            const raster = new TileLayer({
                source: new OSM(),
            });
            //wkb16进制的字符串表示
            const wkb = '0103000020E61000000100000005000000AFA82D76AC9B5A404201744963AD4140CC9DB93DAE9B5A40740FC69561AD4140767163B4AE9B5A407948E4205EAD4140A5C08AA8AB9B5A400410172E61AD4140AFA82D76AC9B5A404201744963AD4140';
            //指定加载的数据格式wkb
            const format = new WKB();
            //读取wkb
            const feature = format.readFeature(wkb, {
                // dataProjection: 'EPSG:4326',//数据投影
                // featureProjection: 'EPSG:3857',//要素投影
            });
            //wkb也是矢量数据，只不过是矢量数据的二进制表示，因此数据需要使用矢量图层加载
            const vector = new VectorLayer({
                source: new VectorSource({
                    features: [feature],
                }),
            });

            const map = new Map({
                layers: [raster, vector],
                target: 'map',
                view: new View({
                    center: [106.432666551,35.354313681],
                    zoom: 15,
                    projection: "EPSG:4326", //指定投影
                })
            });
            map.getView().fit(feature.getGeometry())
        },
        methods: {
        }
    }
</script>

<style scoped>

</style>